<template>
  <div ref="border-wrap" class="bwrap" :style="wrapStyle">
    <component
      :is="type"
      v-bind="$props"
      :width="width"
      :height="height"
    />
    <slot />
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'
import {
  debounce
} from '@/utils/debounce.js'
import bType1 from './types/b-type1.vue'
import bType2 from './types/b-type2.vue'
import bType3 from './types/b-type3.vue'
import bType4 from './types/b-type4.vue'
import bType5 from './types/b-type5.vue'
import bType6 from './types/b-type6.vue'
import bType7 from './types/b-type7.vue'
import bType8 from './types/b-type8.vue'
import bType9 from './types/b-type9.vue'
import bType10 from './types/b-type10.vue'
import bType11 from './types/b-type11.vue'
import bType12 from './types/b-type12.vue'
import bType13 from './types/b-type13.vue'
export default {
  name: 'HzxBorder',
  components: {
    bType1,
    bType2,
    bType3,
    bType4,
    bType5,
    bType6,
    bType7,
    bType8,
    bType9,
    bType10,
    bType11,
    bType12,
    bType13
  },
  props: {
    type: {
      type: String,
      default: () => 'b-type1'
    },
    margin: {
      type: String,
      default: () => '0'
    },
    bgColor: {
      type: String,
      default: () => 'transparent'
    },
    borderColor: {
      type: Array,
      default: () => undefined
    },
    reverse: {
      type: Boolean,
      default: () => false
    },
    duration: {
      type: Number,
      default: () => undefined
    },
    title: {
      type: String,
      default: () => '我是标题'
    },
    titleWidth: {
      type: Number,
      default: () => 250
    }

  },
  data() {
    return {
      width: 0,
      height: 0
    }
  },
  computed: {
    wrapStyle() {
      const marginTypes = ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'] // css属性
      let marginOptions = this.margin.indexOf(',') !== -1 ? this.margin.split(',') : this.margin.split(' ') // css值 10 20
      console.log(marginOptions)
      // 规范css margin值
      marginOptions = marginOptions.map(item => {
        return item.indexOf('px') + item.indexOf('%') === -2 ? item + 'px' : item
      })
      let styles = marginTypes.map((item, idx) => {
        const style = marginOptions[idx] && item + ':' + marginOptions[idx]
        const inheritStyle = marginTypes[idx] + ':' + (marginOptions[idx - 2] || marginOptions[0])
        return style || inheritStyle
      })

      // 计算高度
      let h1 = marginOptions[0].indexOf('%') !== -1 ? this.width * parseInt(marginOptions[0].substring(0, marginOptions[0].indexOf('%'))) / 100 : marginOptions[0]
      let h2 = h1
      if (marginOptions[2]) {
        h2 = marginOptions[2].indexOf('%') !== -1 ? this.width * parseInt(marginOptions[2].substring(0, marginOptions[2].indexOf('%'))) / 100 : marginOptions[2]
      }

      h1 = h1.toString().indexOf('px') === -1 ? h1 + 'px' : h1
      h2 = h2.toString().indexOf('px') === -1 ? h2 + 'px' : h2

      const styleWidth = 'width:calc(100% - ' + (marginOptions[1] || marginOptions[0]) + ' - ' + (marginOptions[3] || marginOptions[1] || marginOptions[0]) + ')'
      const styleHeight = 'height:calc(100% - ' + h1 + ' - ' + h2 + ')'

      styles = styles.concat([styleWidth, styleHeight])
      return styles.join(';')
    }
  },
  mounted() {
    this.resize()
    const erd = elementResizeDetectorMaker()
    erd.listenTo(this.$refs['border-wrap'], debounce(this.resize, 100))
  },
  methods: {
    resize() {
      this.width = this.$refs['border-wrap'].offsetWidth
      this.height = this.$refs['border-wrap'].offsetHeight
    }
  }

}
</script>

<style scoped="scoped" lang="less">
  .bwrap{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<style>
  .border-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
  }
</style>
